<template>
    <div class="base-header">
        <div class="left-container">
            <div class="time-main">
                {{ time }}
            </div>
            <div class="menu-main">
                <div
                    class="menu-item"
                    v-for="(item, index) in leftMenuRouter"
                    :key="index"
                    :class="activeMenu === item.path ? 'active' : ''"
                    @click="handelMneuClick(item)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="center-container">
            <span class="icon">
                <img src="@/assets/images/icon-logo.svg" alt="" />
            </span>
            <span class="label">
                {{ TITLE }}
            </span>
        </div>
        <div class="right-container">
            <div class="menu-main">
                <div
                    class="menu-item"
                    v-for="(item, index) in rightMenuRouter"
                    :key="index"
                    @click="handelMneuClick(item)"
                    :class="activeMenu === item.path ? 'active' : ''"
                >
                    {{ item.name }}
                </div>
            </div>
            <div class="user-main">
                <div class="user">
                    {{ user.userName }}
                </div>
                <el-icon><SwitchButton /></el-icon>
            </div>
        </div>
    </div>
</template>
<script setup>
import { leftMenuRouter, rightMenuRouter } from '@/router/index'
import { useRouter } from 'vue-router'
import { onMounted, watch, ref } from 'vue'
const TITLE = import.meta.env.VITE_TITLE
const router = useRouter()
const activeMenu = ref(null)
const time = ref(null)
const user = ref({
    userName: '管理员'
})
// 监听
watch(
    () => router.currentRoute.value.path,
    newValue => {
        activeMenu.value = newValue
    },
    { immediate: true }
)
onMounted(() => {
    getTime()
})

/**
 * 菜单点击
 */
const handelMneuClick = item => {
    router.push({ path: item.path })
}
/**
 * 获取当前时间
 */
const getTime = () => {
    time.value = new Date().toLocaleString().substring(0, 10).replace(/\//g, '.')
}
</script>
<style lang="scss" scoped>
.base-header {
    @include box-flex($width: 100%, $height: 100%, $direction: row, $justify: space-between, $align: center);
    background: url('~@/assets/images/bg-header.png') no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    .left-container,
    .right-container {
        @include box-flex($width: 30%, $height: 100%, $direction: row, $justify: space-between, $align: center);
        .menu-main {
            @include box-flex($width: 65%, $height: 100%, $direction: row, $justify: space-around, $align: center);
            padding-bottom: 15px;
            .menu-item {
                @include box-flex($width: 200px, $height: 40px, $direction: row, $justify: center, $align: center);
                cursor: pointer;
                color: #fff;
                letter-spacing: 3px;
                transition: all 0.3s;
            }
        }
    }
    .left-container {
        .menu-main {
            .menu-item {
                background: url('~@/assets/images/bg-menu-item-l.png') no-repeat;
                background-size: 100% 100%;
            }
            .menu-item.active {
                background: url('~@/assets/images/bg-menu-item-l-d.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .time-main {
            @include box-flex($width: 35%, $height: 100%, $direction: row, $justify: flex-start, $align: center);
            color: #00edf5;
            font-family: font-regular;
            padding: 0 0 15px 35px;
            font-size: 14px;
            letter-spacing: 2px;
        }
    }
    .right-container {
        .menu-main {
            .menu-item {
                background: url('~@/assets/images/bg-menu-item-r.png') no-repeat;
                background-size: 100% 100%;
            }
            .menu-item.active {
                background: url('~@/assets/images/bg-menu-item-r-d.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .user-main {
            @include box-flex($width: 50%, $height: 100%, $direction: row, $justify: flex-end, $align: center);
            padding: 0 50px 16px 0;
            color: #00edf5;
            font-size: 18px;
            font-family: font-bolder;
            cursor: pointer;
            .user {
                margin-right: 10px;
                font-size: 14px;
                font-family: font-regular;
                letter-spacing: 2px;
            }
        }
    }
    .center-container {
        @include box-flex($width: auto, $height: 100%, $direction: row, $justify: center, $align: center, $flex-1: 1);
        .label {
            font-size: 28px;
            letter-spacing: 3px;
            font-family: font-bold;
        }
    }
}
</style>
